<template>
    <el-table :data="tableData" style="width: 100%" 
    :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="id" label="活动id" width="150px"/>
      <el-table-column prop="title" label="活动标题" width="150px"/>
      <el-table-column prop="begin" label="开始时间" width="170px"/>
      <el-table-column prop="end" label="结束时间" width="170px"/>
      <el-table-column prop="address" label="活动地址" width="200px"/>
      <el-table-column prop="description" label="活动概述" width="200px"/>
      <el-table-column fixed="right" label="Operations" width="120px">
            <template #default="scope">
                <el-button link type="primary" size="small" style = "margin-left: 10px;"
                @click.prevent="updateRow(scope.row,scope.row.id,scope.row.begin,scope.row.end,scope.row.title,scope.row.address,scope.row.description)">
                修改
                </el-button>
                <el-dialog v-model="dialogVisible" title="社区活动管理" width="60%">
                    <span>活动标题：</span>
                    <el-input v-model="tit"></el-input>
                    <br>
                    <span>活动地址：</span>
                    <el-input v-model="ads"></el-input>
                    <br>
                    <br>
                    <span>开始时间：</span>
                    <el-time-picker v-model="btime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="Arbitrary time" />
                    <span>结束时间：</span>
                    <el-time-picker v-model="etime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="Arbitrary time" />
                    <br>
                    <span>活动概述：</span>
                    <el-input v-model="des"></el-input>
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="toSubmit()">
                        确定
                        </el-button>
                    </span>
                    </template>
                </el-dialog>
                <el-button link type="danger"  size="small"
                @click.prevent="deleteRow(scope.row.id)">
                删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Item</el-button>
</template>
  
<script setup>
import { ref,onBeforeMount } from 'vue'
import service from '../api/service'
const s = ref()
const dialogVisible = ref(false)
const chooseId = ref()
let des = ref('')
let ads = ref('')
let btime = ref('')
let etime = ref('')
let tit = ref('')
onBeforeMount(()=>{
    service({
    url:'/fapi/api/admin/activities',
    method:'GET',
    }).then((res)=>{
            console.log(res.data)
            tableData.value = res.data
        }).catch((e)=>{
            console.log(e)
            console.log("报错")
        })
})
const updateRow=(row,id,btime1,etime1,title1,ads1,des1)=>{
    dialogVisible.value = true
    s.value = row
    chooseId.value = id
    tit.value = title1
    btime.value = btime1
    etime.value = etime1
    ads.value = ads1
    des.value = des1
}
const deleteRow = (id) => {
  service({
    url:'/fapi/api/admin/activities?token='+localStorage.getItem('token')+'&id='+id,
    method:"DELETE"
  }).then((res)=>{
    console.log(res)
    window.location.reload()
  })
}
const onAddItem = () => {
    dialogVisible.value = true
    tit.value = ''
    btime.value = ''
    etime.value = ''
    ads.value = ''
    des.value = ''
}
const tableData = ref([
    
])
const toSubmit=()=>{
    dialogVisible.value = false
    const xx = chooseId.value
    console.log(localStorage.getItem("token"))
    if(!xx){
        service({
            url:'/fapi/api/admin/activities?token='+localStorage.getItem('token'),
            method:"POST",
             data:{
                address:ads.value,
                title:tit.value,
                description:des.value,
                end:etime.value,
                begin:btime.value
            }
        }).then((res)=>{
            console.log(res.data)
            tableData.value.push(res.data)
        })
    }else{
        service({
            url:'/fapi/api/admin/activities?token='+localStorage.getItem('token'),
            method:"POST",
             data:{
                address:ads.value,
                id:chooseId.value,
                title:tit.value,
                description:des.value,
                end:etime.value,
                begin:btime.value
            }
        }).then((res)=>{
            console.log(res.data)
            s.value.title = res.data.title
            s.value.address = res.data.address
            s.value.description = res.data.description
            s.value.begin = res.data.begin
            s.value.end = res.data.end
        })
    }
}
</script>
  